import { IconDownload, IconHeart, IconMenu, IconPlayArrow, IconPlusCircle } from '@arco-design/web-react/icon';
import { memo } from 'react'

const dataSource = [
  {
    key: '1',
    songName: '春天的故事',
    artist: '林俊杰',
    album: '春天的故事',
    duration: '3:30',
  },
  {
    key: '2',
    songName: '一路上有你',
    artist: '周杰伦',
    album: '一路上有你',
    duration: '4:20',
  },
  {
    key: '3',
    songName: '海阔天空',
    artist: '周杰伦',
    album: '海阔天空',
    duration: '3:50',
  },
  {
    key: '4',
    songName: '告白气球',
    artist: '陈奕迅',
    album: '告白气球',
    duration: '4:10',
  },
  {
    key: '5',
    songName: '追梦赤子心',
    artist: '刘德华',
    album: '追梦赤子心',
    duration: '3:40',
  },
];

interface TableProps {
  dataSource?: any[]
}

function Table(props: TableProps) {
  // const { dataSource, columns } = props
  return (
    <div className='relative w-full h-full'>
      <table className='w-full h-full rounded-sm'>
        <thead className='bg-primary-500 text-white'>
          <tr className=''>
            <th className='p-3 text-left font-light'>歌名/歌手</th>
            <th className='p-3 text-left font-light'></th>
            <th className='p-3 text-left font-light'>专辑</th>
            <th className='p-3 text-left font-light'>时长</th>
          </tr>
        </thead>
        <tbody>
          {dataSource.map((item) => (
            <tr key={item.key} className='hover:bg-primary-300/20  even:bg-slate-50'>
              <td className='w-96 p-2 text-left font-light border-b border-gray-200 group'>
                <div className='flex items-center'>
                  <div className='relative size-12 rounded overflow-hidden'>
                    <img src='https://picsum.photos/seed/picsum/200' alt='cover' className='size-full object-cover' />
                    <div className='hidden group-hover:block absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 cursor-pointer'>
                      <div className='flex items-center justify-center w-full h-full text-white'>
                        <IconPlayArrow />
                      </div>
                    </div>
                  </div>
                  <div className='ml-3'>
                    <p className='text-sm font-medium '>
                      {/*TODO: add vip tag */}
                      {item.songName}
                    </p>
                    <p className='text-xs text-gray-400'>{item.artist}</p>
                  </div>
                </div>
              </td>
              <td className='p-2 w-64 text-left font-light border-b border-gray-200'>
                <div className='flex items-center gap-4'>
                  <IconHeart />
                  <IconDownload />
                  <IconPlusCircle />
                  <IconMenu />
                </div>
              </td>
              <td className='p-2 text-left font-light border-b border-gray-200'>{item.album}</td>
              <td className='p-2 text-left font-light border-b border-gray-200'>{item.duration}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default memo(Table)
